<script setup>
import { CloseOutlined } from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import utils from "@/common/utils/utils";
import { message } from "ant-design-vue";
import store from "@/store/index";
import { watch,ref,nextTick,computed } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: '',
  }
});

let options = ref([])
let area = ref([])

const getAllProvinceList = () => {
  return request
    .get("/public", "/district/province_list", {

    })
    .then((res) => {
      options.value = res.list.map(item => {
        return {
          children:[],
          label: item.short_name,
          value:item.area_code,
          isLeaf: false,
          type: 'province',
        }
      })
    });
}
const getCityList = (province_id,item) => {
  request
    .get("/public", "/district/city_list", {
      province_id
    })
    .then((res) => {
      if( item){
        item.children = res.list.map(item => {
        return {
          label: item.short_name,
          value:item.area_code,
          isLeaf: true,
          type: 'city'
        }
      })

      }
    });
}


const loadData = async (selectedOptions) => {

  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true;
  if(targetOption.type=='province'){
    try {
      await getCityList(targetOption.value,targetOption)
    } catch (error) {
      targetOption.loading = false;
    }
  }

  targetOption.loading = false;
  
}

const emit = defineEmits(["close", "success"]);

const onConfirmArea = () => {
  editAccout()
}
const onCancelArea = () => {
  emit("close")
}
const getDetail = ()=>{
  request
    .get("/work_ai", "/user/platformAccount/user/info", {
      id:props.id
    })
    .then(async (res) => {
      console.log(res);
      if(res?.result?.area){
        if(Array.isArray(res?.result?.area)){
          return
        }
        let data = res.result.area
        let currentProvince = options.value.find(item=>item.value==data.province.area_code)
        await getCityList(data.province.area_code,currentProvince)
        area.value = [data.province.area_code,data.city.area_code]
      }
    });
}
// 根据选择的ID找出对应的名称
function findNamesByPath(data, path) {
  let currentNode = data;
  let names = [];
  for (let i = 0; i < path.length; i++) {
      const value = path[i];
      const found = currentNode.find(node => node.value == value);
      if (!found) {
          return null; 
      }
      names.push(found.label);
      if (found.type === 'city') {
          break; 
      }
      currentNode = found.children; 
    }
  return names
}
let names = computed(() => {
  return area.value?findNamesByPath(options.value,area.value):[]
})
const editAccout = ()=>{
  
  let params = {
    id:props.id,
  }
  if(names.value.length==1){//省份
    params.area = {
      province:{
        name:names.value[0],
        area_code:area.value[0],
        city_area_code:area.value[1],
      },
      city:{
        name:names.value[0],
        area_code:area.value[1]
      }
    }
    
  }
  if(names.value.length==2){//省份

    params.area = {
      province:{
        name:names.value[0],
        area_code:area.value[0]
      },
      city:{
        name:names.value[1],
        area_code:area.value[1]
      }
    }
  }
  if(names.value.length==0){
    params.area = []
  }
  request
    .put("/work_ai", "/user/platformAccount/user/update", {
      ...params
    })
    .then((res) => {
        message.success("编辑成功");
        emit("success");
    });
}

watch(()=>props.visible,async (val)=>{
    if(val){
       getAllProvinceList().then(()=>{
        getDetail()  
       })
      
    }else{
      area.value = []
    }
})

</script>

<template>
  <a-modal :visible="visible" title="编辑账号地区" centered :width="300"    @cancel="onCancelArea"
    @ok="onConfirmArea" :zIndex="1002">
    <div class="modal-content">
      <a-cascader style="width: 100%;" allowClear v-model:value="area" :options="options" :load-data="loadData" placeholder="请选择"
        />
    </div>
  </a-modal>


</template>

<style lang="less" scoped>
.modal-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.app-item {
  cursor: pointer;
}

.app-item-img {
  display: flex;
  width: 50px;
  height: 50px;
}

.app-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.app-item-txt {
  display: flex;
  justify-content: center;
  line-height: 40px;
}
</style>

<style lang="less">
.account-modal .ss-modal-body {
  padding: 0;
}

.account-modal .ss-modal-content {
  height: 100%;

  .ss-modal-body {
    height: 100%;
  }
}

.download-modal {
  .down-list {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    height: 148px;
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;

    .down-item {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      cursor: pointer;
      box-shadow: 0 2px 16px rgba(28, 76, 186, 0.08);
      text-align: center;
      width: 148px;
      height: 148px;
      border-radius: 4px;

      >a {
        width: 100%;
        height: 100%;
        padding: 24px 0;
        display: inline-block;
      }

      div {
        padding-bottom: 12px;
      }
    }
  }
}
</style>